<script>
  export default {
    name: "zCard",
    props:{
      text:{
        type: String,
        default: 'Card'
      },
    },
    render(h) {
      const zkCard = h(
        'span',
	      {
	        class: 'z-card',
	      },
        this.$slots.default
      )
      return zkCard;
    }
  }
</script>

<style scoped>
	.z-card{
		padding: 20px;
		border: 1px solid  #00000026;
		border-radius: 3px;
		background: #fff;
		width: 90%;

		display: flex;
		flex-direction: column;
	}
	.z-card:hover{
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		border-color: #EBEEF5;
	}
</style>
